<template>
  <el-dialog title="批量创建" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <!--第一页 -->
    <div class="form" v-show="active_1">
      <div class="top">
        <div class="number">
          <span>1</span>
        </div>
        <div class="content">
          <p>
            导入的市场人员个数需小于200，所有导入的数据请参照规范模板；
            <br>如果单行数据不正确，则无法提交创建。
          </p>
          <el-collapse @change="handleChange">
            <el-collapse-item title="模板规则" class="text">
              1. 姓名必须为 中文或英文 不允许有数字
              <br>2. 手机号必须为11位纯数字
              <br>3. 密码位数必须在6～18位，允许数字英文特殊符号
              <br>4. 密码如未填写，则默认生成123456
            </el-collapse-item>
          </el-collapse>
          <p class="download el-icon-download" @click="downloads">
            <a href="https://static.shengxue985.com/template/market/marketerbatch.xlsx">下载模板</a>
          </p>
        </div>
      </div>
      <div class="bottom">
        <div class="number">
          <span>2</span>
        </div>
        <div class="upload">
          <p>上传数据文件（文件类型允许为 .xls .xlsx）</p>
          <el-upload
            class="upload-demo"
            ref="upload"
            :http-request="uploadFile"
            :auto-upload="false"
            :file-list="fileList"
            :on-exceed="handleExceed"
            accept=".xls, .xlsx"
            action="customize"
            :headers="headers"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>
      <div class="footer">
        <span @click="next">下一步</span>
      </div>
    </div>
    <!--第二页 -->
    <div class="form_tow" v-show="active_2">
      <div class="top">
        <span>!</span>数据导入失败
      </div>
      <div class="content">
        <ul>
          <li v-for="(error,index) in errRows" :key="index">{{index + 1}} : {{error.message}}</li>
        </ul>
      </div>
      <p>请返回上一页，重新上传表格</p>
      <div class="footer">
        <span @click="back">返回上一页</span>
      </div>
    </div>
    <!--第三页 -->
    <div class="form_three" v-show="active_3">
      <div class="top">
        <span class="el-icon-check"></span>数据导入成功
      </div>
      <div class="content">共计导入 {{total}} 行数据</div>
      <div class="footer">
        <span @click="done">完成</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { upload } from '@/api/marketer'
import { getToken } from '@/utils/auth' // 验权
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
export default {
  name: 'AddBatch',
  props: {
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      active_1: true,
      active_2: false,
      active_3: false,
      headers: {},
      files: {},
      fileList: [],
      tableData: [],
      tableHeader: [],
      total: null,
      errRows: []
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.headers = { accessToken: getToken() }
  },
  watch: {
    dialog(boolean) {
      this.dialogVisible = boolean
      if (this.dialogVisible == true) {
        this.active_1 = true
      }
    }
  },
  methods: {
    // 关闭
    handleClose(done) {
      const that = this
      this.$confirm('数据未保存，确认关闭？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(_ => {
          that.$emit('cancel')
          this.active_1 = false
          this.active_2 = false
          this.active_3 = false
          this.errRows = []
          this.fileList = []
        })
        .catch(_ => {})
    },
    handleChange() {},
    // 返回上一页
    back() {
      this.active_1 = true
      this.active_2 = false
    },
    // 点击完成按钮
    done() {
      this.$emit('reloadList')
      this.$emit('cancel')
      this.active_1 = false
      this.active_2 = false
      this.active_3 = false
    },
    // 下载模板
    downloads() {
      this.$message({
        message: '模板下载成功,请注意浏览器下方提示文件夹位置',
        type: 'success',
        center: true
      })
    },
    // 后面上传文件覆盖前面的
    handleExceed(file, fileList) {
      fileList[0].name = file[0].name
      this.files = file[0]
    },
    uploadFile(params) {
      //自定义文件上传
      if (this.files.name != undefined) {
        var fileObj = this.files
      } else {
        var fileObj = params.file
      }
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('file', fileObj)
      // 发起请求
      upload(formData).then(res => {
        if(res.length == 0){
          this.$message({
            type: 'warning',
            message: '导入数据失败,请检查表格重新上传'
          })
          this.errRows = []
          this.active_1 = false
          this.active_2 = true
          this.active_3 = false
        } else if (res[0].fail == 0) {
          this.total = res[0].success
          this.$message({
            type: 'success',
            message: `导入数据成功`
          })
          this.active_1 = false
          this.active_2 = false
          this.active_3 = true
        } else {
          this.errRows = res[0].messages.sort((a, b) => a - b)
          this.active_1 = false
          this.active_2 = true
          this.active_3 = false
          this.$message({
            type: 'warning',
            message: '导入数据失败'
          })
        }
      })
        .catch(() => {})
    },
    next() {
      this.$refs.upload.submit()
      this.fileList = []
      this.files = {}

      // this.$emit('cancel');
      // this.$emit('reloadList');
    }
  },
  components: {
    UploadExcelComponent
  }
}
</script>

<style lang="scss">
.form {
  .el-collapse-item__arrow {
    margin-right: 80%;
  }
  .top {
    display: flex;
    .number {
      flex: 1;
      span {
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 1px solid #606266;
        border-radius: 50%;
      }
    }
    .content {
      flex: 8;
      font-size: 14px;
      font-weight: 600;
      .el-collapse-item__content {
        color: #909399;
        font-size: 12px;
        font-weight: 400;
        padding-bottom: 10px;
      }
      .download {
        width: 80px;
        height: 33px;
        line-height: 33px;
        text-align: center;
        color: #409eff;
        font-weight: 500;
        cursor: pointer;
      }
    }
  }
  .bottom {
    display: flex;
    .number {
      flex: 1;
      span {
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: block;
        margin: 20px auto;
        line-height: 30px;
        text-align: center;
        border: 1px solid #606266;
        border-radius: 50%;
      }
    }
    .upload {
      flex: 8;
      font-size: 15px;
      font-weight: 600;
    }
  }
  .footer {
    span {
      width: 90px;
      height: 35px;
      border-radius: 3px;
      line-height: 35px;
      display: block;
      margin: 35px auto 0;
      background-color: #409eff;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.form_tow {
  margin-left: 20px;
  .top {
    font-size: 18px;
    font-weight: 600;
    span {
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      margin-right: 15px;
      background-color: #000;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      border-radius: 50%;
    }
  }
  .content {
    margin-left: 10px;
    li {
      list-style: none;
    }
  }
  .footer {
    span {
      width: 110px;
      height: 35px;
      border-radius: 3px;
      line-height: 35px;
      display: block;
      margin: 15px auto 0;
      background-color: #409eff;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.form_three {
  .top {
    font-size: 18px;
    font-weight: 600;
    padding: 20px 0;
    span {
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      margin-right: 15px;
      background-color: #000;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      border-radius: 50%;
    }
  }
  .content {
    margin-left: 30px;
  }
  .footer {
    span {
      width: 110px;
      height: 35px;
      line-height: 35px;
      display: block;
      margin: 55px auto 0;
      background-color: #409eff;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
